﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}

@section header{

    <link href="@Url.Content("~/lib/jqwidgets/styles/jqx.base.css")" rel="stylesheet" type="text/css">

    <script src='@Url.Content("~/lib/jqwidgets/jqxcore.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxdata.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxbuttons.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxscrollbar.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxmenu.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxlistbox.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxdropdownlist.js")' type="text/javascript"></script>

    @* Use this customized version of jqxgrid.js, grid autobind is set to false *@
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.custom.js")' type="text/javascript"></script>

    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.selection.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.columnsresize.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.filter.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.sort.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.pager.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.grouping.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxgrid.storage.js")' type="text/javascript"></script>

    <script src='@Url.Content("~/lib/jqwidgets/jqxwindow.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/jqwidgets/jqxpanel.js")' type="text/javascript"></script>

    <link href="@Url.Content("~/lib/bootstrap-slider/bootstrap-slider.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/bootstrap-slider/bootstrap-slider.min.js")' type="text/javascript"></script>

    <link href="@Url.Content("~/lib/jquery.ui/1.12.1/jquery-ui.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/jquery.ui/1.12.1/jquery-ui.min.js")' type="text/javascript"></script>

}

<style>
    /*.select-list li input {
        width: 320px !important;
    }*/

    .select-list li {
        width: 450px !important;
    }

    .select-list .search {
        width: 120px !important;
    }

    #gridTable tr {
        cursor: pointer;
    }

    .jqx-grid {
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }

    .jqx-widget-content {
        font-family: "Microsoft YaHei","open sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    }

    .jqx-widget-header {
        background-color: transparent;
    }

    .jqx-grid-cell-pinned {
        background-color: transparent;
    }

    .jqx-grid-column-header {
        /*background-color: #e8e8e8;*/
        font-weight: bold;
        border-left: 0px;
        border-right: 0px;
    }

        .jqx-grid-column-header .jqx-icon-arrow-up, .jqx-grid-column-header .jqx-icon-arrow-up-hover, .jqx-grid-column-header .jqx-icon-arrow-up-selected {
            background-image: url();
            background-repeat: no-repeat;
            background-position: center;
        }

        .jqx-grid-column-header .jqx-icon-arrow-down, .jqx-grid-column-header .jqx-icon-arrow-down-hover, .jqx-grid-column-header .jqx-icon-arrow-down-selected {
            background-image: url();
            background-repeat: no-repeat;
            background-position: center;
        }

    .jqx-grid-cell {
        border-width: 0px 0px 1px 0px;
    }

    .score-checkbox {
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    .score-checkbox-label {
        display: inline-block;
        margin: 0;
        margin-right: 10px;
        min-width: 120px;
        text-align: left;
        vertical-align: middle;
    }
</style>

<div class="container-div">
    <div class="row">
        @*<div id="searchDiv" class="col-sm-12 search-collapse">
            <div class="select-list">
                <ul>
                    <li>
                        Session Id: <input id="session" col="session_id" type="text" />
                    </li>
                    <li>
                        <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;Search</a>
                    </li>
                </ul>
            </div>
        </div>*@
        @*<div class="btn-group-sm hidden-xs" id="toolbar">
            <a id="btnEdit" class="btn btn-success disabled" onclick="viewDetails()"><i class="fa fa-edit"></i> View details</a>
        </div>*@
        <div id="searchDiv" class="col-sm-12 search-collapse">
            <input type="hidden" id="departmentId" col="DepartmentId">
            <div class="select-list">
                <ul>
                    <li>
                        Agent Name：<input id="agent_name" col="agent_name" type="text" value='@ViewData["SearchAgentName"]' />
                    </li>
                    <li>
                        Customer Name：<input id="customer_name" col="customer_name" type="text" value='@ViewData["SearchCustomerName"]' />
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;Call Center：<input id="call_center" col="call_center" type="text" value='@ViewData["SearchCallCenter"]' />
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Call Purpose：<span id="is_enrollment" col="is_enrollment"></span>
                    </li>
                    <li class="select-time">
                        <label>&nbsp;Time of Call：</label>
                        <input id="startTime" col="start_time" type="text" class="time-input" placeholder="From" />
                        <span> - </span>
                        <input id="endTime" col="end_time" type="text" class="time-input" placeholder="To" />
                    </li>
                    <li style="line-height:30px;">
                        <input id="similiarity_score_min" col="similiarity_score_min" type="hidden" value="0" />
                        <input id="similiarity_score_max" col="similiarity_score_max" type="hidden" value="100" />
                        <input id="pcp_score_min" col="pcp_score_min" type="hidden" value="0" />
                        <input id="pcp_score_max" col="pcp_score_max" type="hidden" value="100" />
                    </li>
                    <li style="line-height:30px;">
                        <input type="checkbox" id="cb_similiarity_score" class="score-checkbox" />
                        <label for="cb_similiarity_score" class="score-checkbox-label">Customer consent score:</label>
                        <input id="similiarity_score_slider" data-slider-id='slider2' type="text" />
                    </li>
                    <li style="line-height:30px;">
                        <input type="checkbox" id="cb_pcp_score" class="score-checkbox" />
                        <label for="cb_pcp_score" class="score-checkbox-label">PCP score:</label>
                        <input id="pcp_score_slider" data-slider-id='slider3' type="text" />
                    </li>
                    <li class="search">
                        <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;Search</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="gridTable" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        initFilters();
        initGrid();

        //$(document).on('click', $("#gridTable tr"), function () {
        //    var aa = $(this);
        //    alert($(this).attr('data-uniqueid'));
        //});

        //$('#gridTable').on('click', $("tr"), function () {
        //    var aa = $(this);
        //    alert($(this).attr('data-uniqueid'));
        //});

        //$(document).on("click", "#gridTable tbody tr", function () {
        //    var uniqueid = $(this).data('uniqueid');
        //    viewDetails(uniqueid);
        //});

    });

    function initGrid() {

        var queryUrl = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetPageListJson")';
        var defaultSort = "time_of_call";
        var defaultSortType = "DESC";

        var source = {
            datatype: "json",
            data: {
                //agent_name: "",
                //call_center: "",
                //customer_name: "",
                //is_enrollment: "-1",
                sort: defaultSort,
                sortType: defaultSortType
            },
            formatdata: function (data) {

                $('#gridTable').jqxGrid('showloadelement');

                var params = $('#searchDiv').getWebControls();

                data.save_params = "true";
                data.agent_name = $.trim(params.agent_name);
                data.call_center = $.trim(params.call_center);
                data.customer_name = $.trim(params.customer_name);
                data.is_enrollment = params.is_enrollment;
                data.start_time = params.start_time;
                data.end_time = params.end_time;

                if ($('#cb_similiarity_score:checked').length == 1) {
                    data.similiarity_score_min = params.similiarity_score_min;
                    data.similiarity_score_max = params.similiarity_score_max;
                }

                if ($('#cb_pcp_score:checked').length == 1) {
                    data.pcp_score_min = params.pcp_score_min;
                    data.pcp_score_max = params.pcp_score_max;
                }

                var pageable = $('#gridTable').jqxGrid('pageable');
                if (pageable) {
                    var paginginformation = $('#gridTable').jqxGrid('getpaginginformation');
                    // The page's number.
                    var pagenum = paginginformation.pagenum;
                    // The page's size.
                    var pagesize = paginginformation.pagesize;
                    //alert(pagenum);
                    data.PageIndex = pagenum + 1;
                    data.PageSize = pagesize;

                } else {
                    //alert(-1);
                    data.PageIndex = -1;
                    data.PageSize = -1;

                }

                var groupable = $('#gridTable').jqxGrid('groupable');

                //if () {

                //}
                var sortinformation = $('#gridTable').jqxGrid('getsortinformation');
                // The sortcolumn represents the sort column's datafield. If there's no sort column, the sortcolumn is null.
                var sortcolumn = sortinformation.sortcolumn;
                // The sortdirection is an object with two fields: 'ascending' and 'descending'. Ex: { 'ascending': true, 'descending': false }
                var sortdirection = sortinformation.sortdirection;

                if (sortcolumn != undefined) {

                    if (sortcolumn == "time_of_call_text") {
                        data.sort = "time_of_call";
                    } else if (sortcolumn == "recording_file") {
                        data.sort = "s3_url";
                    } else if (sortcolumn == "is_enrollment_text") {
                        data.sort = "is_enrollment";
                    } else if (sortcolumn == "enrollment_score_text") {
                        data.sort = "enrollment_score";
                    } else {
                        data.sort = sortcolumn;
                    }

                    if (sortdirection.ascending) {
                        data.sortType = "ASC";
                    } else {
                        data.sortType = "DESC";
                    }

                } else {
                    data.sort = defaultSort;
                    data.sortType = defaultSortType;
                }

                return data;
            },
            url: queryUrl,
            sort: function () {
                // update the grid and send a request to the server.
                $("#gridTable").jqxGrid('expandallgroups');
                $('#gridTable').jqxGrid('gotopage', 0);
                $("#gridTable").jqxGrid('updatebounddata', 'sort');
            },
            root: "Data",
            beforeprocessing: function (data) {
                source.totalrecords = data.Total;
            }
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        var isenrollment_cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

            var formatCell = '<div class="jqx-grid-cell-left-align" style="margin-top: 17.5px;">';

            if (value == "Enrollment") {
                formatCell += '<span class="label label-success">Enrollment</span>';
            }
            else if (value == "Non-enrollment") {
                formatCell += '<span class="label label-warning">Pre-enrollment</span>';
            }
            else {
                formatCell += '<span class="label label-warning">Pre-enrollment</span>';
            }

            formatCell += '</div>';
            return formatCell;
        }

        var score_cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

            var formatCell = '<div class="jqx-grid-cell-left-align" style="margin-top: 17.5px;">';

            if (value == "") {
            }
            else if (parseFloat(value) > 60) {
                formatCell += '<span class="badge badge-primary">' + value + '%</span>';
            } else {
                formatCell += '<span class="badge badge-danger">' + value + '%</span>';
            }

            formatCell += '</div>';
            return formatCell;
        }

        var enrollment_call_score_cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

            var formatCell = '<div class="jqx-grid-cell-left-align" style="margin-top: 17.5px;">';

            if (value == "") {
            }
            else {
                var is_enrollment = value.split('||')[0];
                var score = value.split('||')[1];

                if (parseInt(is_enrollment) > 0) {

                    if (parseFloat(score) > 60) {
                        formatCell += '<span class="badge badge-primary">' + score + '%</span>';
                    } else {
                        formatCell += '<span class="badge badge-danger">' + score + '%</span>';
                    }

                } else {
                    formatCell += '<span class="badge badge-warning">' + score + '%</span>';
                }
            }

            formatCell += '</div>';
            return formatCell;
        }

        var groupsrenderer = function (text, group, expanded, data) {

            //console.log('---------');
            //console.log(text);
            //console.log(group);
            //console.log(data);
            //console.log('---------');

            var text = data.groupcolumn.text + ': ';
            //var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
            var rows = new Array();

            if (data.groupcolumn.datafield == 'enrollment_score_text') {
                if (group != "") {
                    group = group.split('||')[1] + '%';
                }

            } else if (data.groupcolumn.datafield == 'similiarity_score' || data.groupcolumn.datafield == 'pcp_similiarity_score') {
                if (group != "") {
                    group = group + '%';
                }
            }

            if (data.subItems.length > 0) {

                rows = data.subItems;

            } else {

                var getRows = function (group, rows) {
                    if (group.subGroups.length > 0) {
                        for (var i = 0; i < group.subGroups.length; i++) {
                            getRows(group.subGroups[i], rows);
                        }
                    } else {
                        for (var i = 0; i < group.subItems.length; i++) {
                            rows.push(group.subItems[i]);
                        }
                    }
                }
                getRows(data, rows);

            }

            if (data.groupcolumn.datafield == 'customer_name') {

                var enrollment_item = null;

                if (rows.length > 0) {
                    for (var i = 0; i < rows.length; i++) {
                        var is_enrollment = rows[i].is_enrollment
                        if (is_enrollment > 0) {
                            enrollment_item = rows[i];
                            break;
                        }
                    }
                }

                if (enrollment_item != null) {
                    return '<div class="jqx-grid-groups-row" style="position: absolute;">' +
                        '<span>' + text + '</span>' +
                        '<span class="jqx-grid-groups-row-details">' + group + " (" + rows.length + ")" + " - Enrollment" + " - Customer Consent Score " + enrollment_item.similiarity_score + "%" + '</span>' +
                        '</div>';
                } else {
                    return '<div class="jqx-grid-groups-row" style="position: absolute;">' +
                        '<span>' + text + '</span>' +
                        '<span class="jqx-grid-groups-row-details">' + group + " (" + rows.length + ")" + " - Pre-enrollment" + '</span>' +
                        '</div>';
                }

            } else {

                return '<div class="jqx-grid-groups-row" style="position: absolute;">' +
                    '<span>' + text + '</span>' +
                    '<span class="jqx-grid-groups-row-details">' + group + " (" + rows.length + ")" + '</span>' +
                    '</div>';
            }
        }

        $("#gridTable").jqxGrid({
            autosavestate: true,
            autoloadstate: true,
            width: '100%',
            source: dataAdapter,
            rowsheight: 50,
            //autorowheight: true,
            enabletooltips: true,
            //autoheight: true,
            height: 450,
            //height: '100%',
            sortable: true,
            //sorttogglestates: 1,
            pagesizeoptions: ['10', '25', '50', '100'],
            pageable: true,
            virtualmode: true,
            groupable: true,
            groupsrenderer: groupsrenderer,
            groups: ['customer_name'],
            groupsexpandedbydefault: true,
            //showgroupsheader: false,
            rendergridrows: function () {
                console.log(dataAdapter.records);
                return dataAdapter.records;
            },
            ready: function () {
                // NOTE: jqxgrid.custom.js was modified, set autoBind to false. Data need to be loaded manually.

                setTimeout(function () {
                    // Though autoloadstate is true, page index/size is not ready to use at this time.
                    // Give it a slight delay to load data when grid state is fully restored.

                    $("#gridTable").jqxGrid('updatebounddata');
                }, 100);
            },
            columns: [
                { datafield: 'recording_id', text: 'RECORDING ID', width: 120, menu: false },
                //{ datafield: 'recording_file', text: 'FILE', width: 200, menu: false },
                { datafield: 'is_enrollment_text', text: 'CALL PURPOSE', width: 150, cellsrenderer: isenrollment_cellsrenderer, menu: false },
                { datafield: 'call_center', text: 'CALL CENTER', width: 150, menu: false },
                { datafield: 'time_of_call_text', text: 'TIME OF CALL', width: 180, menu: false },
                { datafield: 'length_of_call', text: 'LENGTH OF CALL', width: 140, menu: false },
                { datafield: 'customer_name', text: 'CUSTOMER NAME', width: 160, menu: false },
                { datafield: 'agent_name', text: 'AGENT NAME', width: 160, menu: false },
                //{ datafield: 'enrollment_score_text', text: 'ENROLLMENT CALL SCORE', width: 200, cellsrenderer: enrollment_call_score_cellsrenderer, menu: false },
                { datafield: 'customer_consent_score', text: 'CUSTOMER CONSENT SCORE', width: 200, cellsrenderer: score_cellsrenderer, menu: false },
                { datafield: 'pcp_similiarity_score', text: 'PCP SCORE', width: 120, cellsrenderer: score_cellsrenderer, menu: false }
            ]
        });

        //$("#gridTable").bind("pagechanged", function (event) {
        //    //$('#gridTable').jqxGrid('showloadelement');
        //    //$("#gridTable").jqxGrid('updatebounddata');
        //});

        //$("#jqxgrid").bind("pagesizechanged", function (event) {
        //    $('#gridTable').jqxGrid('showloadelement');
        //    //$("#gridTable").jqxGrid('updatebounddata');
        //});

        $("#gridTable").on('rowselect', function (event) {
            // event arguments.
            var args = event.args;
            // row's bound index.
            var rowBoundIndex = args.rowindex;
            // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
            var rowData = args.row;

            if (rowData) {
                var uniqueid = rowData.Id;
                // if (uniqueid) viewDetails(uniqueid);
            }
        });

        $("#gridTable").on('rowclick', function (event) {
            var args = event.args;
            var row = args.row;

            if (row) {
                boundData = row.bounddata;

                if (boundData) {
                    var uniqueid = boundData.Id;
                    if (uniqueid) viewDetails(uniqueid);
                }
            }
        });

        $("#gridTable").on("bindingcomplete", function (event) {
            $("#gridTable").jqxGrid('expandallgroups');
        });

        //$("#gridTable").on("groupschanged", function (event) {
        //    if (event.args.groups.length > 0) {
        //        alert(false);
        //        $('#gridTable').jqxGrid({
        //            pageable: false,
        //            virtualmode: false,
        //            height: 450
        //        });
        //    } else {
        //        alert(true);
        //        $('#gridTable').jqxGrid({
        //            pageable: true,
        //            virtualmode: true,
        //            height: '100%'
        //        });
        //    };
        //});

        //$('#gridTable').ysTable({
        //    url: queryUrl,
        //    sortName: 'c.time_of_call',
        //    sortOrder: 'desc',
        //    clickToSelect: true,
        //    columns: [
        //        { checkbox: true, visible: false },
        //        //{ field: 'Id', title: 'Id', visible: false },
        //        {
        //            field: 'recording_id', title: 'Recording Id', sortable: true, sortName: 'b.recording_id'
        //            //formatter: function (value, item, index) {
        //            //    return '<a href="javascript: void(0)" onclick="viewDetails(' + item.Id + ')"><i class="fa fa-edit"></i> ' + value + '</a>';
        //            //}
        //        },
        //        {
        //            field: 'recording_file', title: 'File', sortable: true, sortName: 'a.s3_url'
        //            //formatter: function (value, item, index) {
        //            //    return '<a href="javascript: void(0)" onclick="viewDetails(' + item.Id + ')">' + value + '</a>';
        //            //}
        //        },
        //        {
        //            field: 'is_enrollment', title: 'Call Purpose', sortable: true, sortName: 'b.is_enrollment',
        //            formatter: function (value, item, index) {
        //                if (value == "1") {
        //                    return '<span class="label label-success">Enrollment</span>';
        //                }
        //                else if (value == "0") {
        //                    return '<span class="label label-warning">Pre-enrollment</span>';
        //                }
        //                else {
        //                    return '<span class="label label-warning">Pre-enrollment</span>';
        //                }
        //            }
        //        },
        //        { field: 'call_center', title: 'Call Center', sortable: true, sortName: 'c.call_center' },
        //        { field: 'time_of_call', title: 'time_of_call_value', visible: false },
        //        //{
        //        //    field: 'time_of_call', title: 'Time of Call', sortable: true, sortName: 'c.time_of_call', formatter: function (value, row, index) {
        //        //        return ys.formatDate(value, "yyyy-MM-dd HH:mm:ss");
        //        //    }
        //        //},
        //        { field: 'time_of_call_text', title: 'Time of Call', sortable: true, sortName: 'c.time_of_call' },
        //        { field: 'length_of_call', title: 'Length of Call', sortable: true, sortName: 'c.length_of_call' },
        //        { field: 'agent_name', title: 'Agent Name', sortable: true, sortName: 'c.agent_name' },
        //        { field: 'customer_name', title: 'Customer Name', sortable: true, sortName: 'c.customer_name' },
        //        //{
        //        //    field: 'has_customerconsent', title: 'Customer Consent', sortable: true, sortName: 'b.has_customerconsent',
        //        //    formatter: function (value, item, index) {
        //        //        if (value == "1") {
        //        //            return '<span class="label label-primary">Yes</span>';
        //        //        }
        //        //        else if (value == "0") {
        //        //            return '<span class="label label-danger">No</span>';
        //        //        }
        //        //        else {
        //        //            return '<span class="label label-danger">No</span>';
        //        //        }
        //        //    }
        //        //},
        //        {
        //            field: 'similiarity_score', title: 'Customer Consent Score', sortable: true, sortName: 'b.similiarity_score',
        //            formatter: function (value, item, index) {
        //                if (value == "") {
        //                    return '';
        //                }
        //                else if (parseFloat(value) > 60) {
        //                    return '<span class="badge badge-primary">' + value + '%</span>';
        //                } else {
        //                    return '<span class="badge badge-danger">' + value + '%</span>';
        //                }
        //            }
        //        },
        //    ],
        //    queryParams: function (params) {
        //        var pagination = $('#gridTable').ysTable('getPagination', params);
        //        var queryString = $('#searchDiv').getWebControls(pagination);
        //        return queryString;
        //    }
        //});
    }

    function searchGrid() {
        //$('#gridTable').ysTable('search');
        $('#gridTable').jqxGrid('gotopage', 0);
        $("#gridTable").jqxGrid('updatebounddata');
        resetToolbarStatus();
    }

    function viewDetails(id) {
        self.location.href = 'CallRecordingAnalysisDetail?id=' + id;
        return;

        ys.openDialog({
            title: 'Details',
            content: '@Url.Content("~/BusinessManage/CallRecordingAnalysis/CallRecordingAnalysisDetail")' + '?id=' + id,
            width: '768px',
            height: '640px',
            callback: function (index, layero) {
                layer.close(index);
            }
        });
    }

    function initFilters() {
        $("#is_enrollment").ysComboBox({ data: ys.getJson(@Html.Raw(typeof(LTCCallPurposeEnum).EnumToDictionaryString())) });
        $('#is_enrollment').ysComboBox('setValue', '@ViewData["SearchIsEnrollment"]');

        var start_time = '@ViewData["SearchStartTime"]';
        var end_time = '@ViewData["SearchEndTime"]';

        laydate.render({ elem: '#startTime', format: 'MM/dd/yyyy', lang: 'en', value: start_time });
        laydate.render({ elem: '#endTime', format: 'MM/dd/yyyy', lang: 'en', value: end_time });

        var score_min = '@ViewData["SearchSimiliarityScoreMin"]';
        var score_max = '@ViewData["SearchSimiliarityScoreMax"]';
        var similiarity_score_checked = true;
        var pcp_score_checked = true;

        if (score_min == "") {
            score_min = "0";
            similiarity_score_checked = false;
        }

        if (score_max == "") {
            score_max = "100";
            similiarity_score_checked = false;
        }

        var scoreSliderOptions = {
            min: 0,
            max: 100,
            step: 1,
            range: true,
            value: [parseInt(score_min), parseInt(score_max)]
        }

        $('#similiarity_score_slider').bootstrapSlider(scoreSliderOptions).on('change', function (e) {
            $("#similiarity_score_min").val(e.value.newValue[0]);
            $("#similiarity_score_max").val(e.value.newValue[1]);
        });

        $("#similiarity_score_min").val(score_min);
        $("#similiarity_score_max").val(score_max);

        score_min = '@ViewData["SearchPcpScoreMin"]';
        score_max = '@ViewData["SearchPcpScoreMax"]';

        if (score_min == "") {
            score_min = "0";
            pcp_score_checked = false;
        }

        if (score_max == "") {
            score_max = "100";
            pcp_score_checked = false;
        }

        scoreSliderOptions = {
            min: 0,
            max: 100,
            step: 1,
            range: true,
            value: [parseInt(score_min), parseInt(score_max)]
        }

        $('#pcp_score_slider').bootstrapSlider(scoreSliderOptions).on('change', function (e) {
            $("#pcp_score_min").val(e.value.newValue[0]);
            $("#pcp_score_max").val(e.value.newValue[1]);
        });

        $("#pcp_score_min").val(score_min);
        $("#pcp_score_max").val(score_max);
        $('#cb_similiarity_score').prop("checked", similiarity_score_checked);
        $('#cb_pcp_score').prop("checked", pcp_score_checked);
        $('#cb_similiarity_score, #cb_pcp_score').ysCheckBox();

        initSuggestion("#agent_name");
        initSuggestion("#customer_name");
        initSuggestion("#call_center");
    }

    function initSuggestion(elem_id) {
        $(elem_id).autocomplete({
            minLength: 2,
            delay: 500,
            source: function (request, response) {
                var data = {};

                if (elem_id == "#agent_name") data = { agent_name: request.term }
                if (elem_id == "#customer_name") data = { customer_name: request.term }
                if (elem_id == "#call_center") data = { call_center: request.term }

                var url = '@Url.Content("~/BusinessManage/CallRecordingAnalysis/GetSearchFilterSuggestions")';
                var suggestions = [];

                $.post(url, data, function (obj) {
                    if (obj.Tag == 1) {
                        suggestions = jQuery.map(obj.Data, function (item, index) {
                            if (elem_id == "#agent_name") return item.agent_name;
                            if (elem_id == "#customer_name") return item.customer_name;
                            if (elem_id == "#call_center") return item.call_center;
                        });
                    }
                }).always(function () {
                    response(suggestions);
                });
            }
        });
    }

</script>